<template>
	<div ref='deviceMap' style='height:100%;'></div>
</template>

<script>
	import echarts from 'echarts'
	import chinaMap from '@/utils/china.json'
	echarts.registerMap('china', chinaMap)
	
	let echart = null
	
	export default {
		props : {
			max : {
				type : Number,
				default : 100
			},
			
			series : {
				type : Array,
				default : []
			}
		},
		data() {
			return {
				
			}
		},
		
		methods : {
			draw : function(){
				
				let options = {
					tooltip: {
						textStyle : {
							fontSize : 12,
							lineHeight : 40
						},
						formatter : function(params){
							if(params.data){
								let value = params.data.value
								return `${params.name} :<br/>设备数(台) : ${value[0]}<br/>设备占比 : ${value[1]}<br/>今日新增设备(台) : ${value[2]}<br/>在线(台) : ${value[3]}<br/>未启用(台) : ${value[4]}`
							}
							
						}
					},
					visualMap : {
						min : 0,
						max : this.max,
						left : 'left',
						top  : 'bottom',
						inRange: {
							color: ['#e0ffff', '#006edd']
						},
						calculable : true
					},
					
					geo : {
						map : 'china'
					},
					
					series : [
						{
							type : 'map',
							name : '在线',
							mapType: 'china',
							data : this.series
						}
					]
				}
				
				echart.setOption(options)
			}
		},
		
		watch : {
			max : function(){
				this.draw()
			},
			series : function(){
				this.draw()
			}
		},
		
		mounted () {
			echart = echarts.init(this.$refs.deviceMap)
			this.draw()
		}
		
	}
</script>

<style>

</style>
